<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>2018/12/5</title>
    <script src="node_modules/_vue@2.5.17@vue/dist/vue.min.js"></script>
    <script src="node_modules/Mock/dist/mock-min.js"></script>
    <link rel="stylesheet" href="./index2.css">
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <!--好的代码像粥一样,是得用时间和精力熬的。-->
</head>
<body>
<div id="root">
    <!--防止页面"闪烁"-->
    <ul v-show='!!userData.length' class="user-list">
        <li class="user-item">
            <span>姓名</span>
            <span>性别</span>
            <span>年龄</span>
            <span>电话</span>
            <span>操作</span>
        </li>
        <transition-group
                name="custom-classes-transition"
                enter-active-class="animated data"
                leave-active-class="animated bounceOutLeft"
                tag="ul"
        >
        <li v-if="show" v-for="(item,index) in filterUser" :key="item.name" class="user-item">
            <span>{{item.name}}</span>
            <span>{{item.gender|toGender}}</span>
            <span>{{item.age}}</span>
            <span>{{item.phoneNumber}}</span>
            <span @click ="clickToDel(index)">删除</span>
        </li>
        </transition-group>

    </ul>
    <ul class="ft-bar">
        <li v-for="(item,key) in ftBar" @click="select(key)" :class="{active: key== selectedKey}">{{item}}</li>
    </ul>
</div>
<script>
    Vue.filter('toGender',function(value){
        return value ? '男':'女';
    });
    new Vue({
        el:'#root',
        data:{
            userData:Mock.mock({
                'data|10':[{
                    name:'@cname',
                    gender:'@boolean',
                    city:'@city',
                    phoneNumber:/^1[345789]\d{9}$/,
                    age: '@integer(16,30)',
                }]}).data,
            ftBar:['男生','女生','20以下','移动'],
            selectedKey: -1,
            show: true,
        },
        methods:{
            clickToDel(index){
                this.userData.splice(index,1);
            },
            fn(){
                console.log(this.username);
            },
            select(key){
                this.selectedKey = key;
            },
        },
        computed: {
            filterUser: function () {
                let selectedFns = {
                    '-1': () => true,
                    0: value => value.gender,
                    1: value => !value.gender,
                    2: value => value.age < 20,
                    3: value => /^1[3458]/.test(value.phoneNumber),
                };
                return this.userData.filter(selectedFns[this.selectedKey]);
            },
        }
    });

</script>
</body>
</html>
